<template>
    <div>
        <el-dialog
            :modal-class="kefu.state.tabMode == 'small' ? 'kefu-user-window-modal' : ''"
            class="kefu-user-window"
            :class="[
                kefu.state.sessionDialog.shake ? 'ba-kefu-shake' : '', 
                kefu.state.tabMode == 'small' ? 'kefu-user-window-small' : '',
                isMobile ? 'kefu-user-window-mobile' : ''
            ]"
            :top="getDialogTop()"
            v-model="kefu.state.sessionDialog.show"
            :draggable="!isMobile"
            :width="getDialogWidth()"
            :show-close="kefu.state.tabMode != 'small' && !isMobile"
            @opened="onDialogOpened"
        >
            <template #header="{ titleId, titleClass }">
                <div :id="titleId" :class="titleClass" class="kefu-user-window-header">
                    <template v-if="!isEmpty(kefu.state.sessionInfo) && kefu.state.sessionInfo.session_user_id">
                        <span class="header-title">{{ kefu.t('customer_service_for_you', {name: kefu.state.sessionInfo.nickname}) }}</span>
                        <span :class="'status-' + kefu.state.sessionInfo.session_user_status" class="csr-status">
                            • {{ translateStatus(kefu.state.sessionInfo.session_user_status) }}
                        </span>
                    </template>
                    <template v-else>
                        <span class="header-title">{{ kefu.config?.app_name }}</span>
                    </template>
                    <Icon v-if="kefu.state.awaitResponse" name="el-icon-Loading" size="14" class="await-response-loading is-loading" />
                    
                    <!-- 移动端关闭按钮 -->
                    <div v-if="isMobile" class="mobile-close-btn" @click="closeDialog">
                        <i class="el-icon-close"></i>
                    </div>
                </div>
            </template>
            <div class="window">
                <div class="left">
                    <div class="notice" v-if="!isMobile">
                        <el-alert :closable="false" :type="kefu.config?.notice_theme">
                            <template #title>
                                <MdPreview
                                    class="notice-preview markdown-preview"
                                    id="notice"
                                    editorId="notice"
                                    codeTheme="github"
                                    :modelValue="kefu.config?.notice"
                                    :show-code-row-number="true"
                                />
                            </template>
                        </el-alert>
                    </div>
                    <Window class="window-records" />
                </div>
                <div class="right" v-if="!isMobile">
                    <el-carousel :motion-blur="true" height="150px">
                        <el-carousel-item v-for="(item, idx) in kefu.config?.sliders" :key="idx">
                            <el-image class="h100 w100" fit="cover" :src="fullUrl(item)"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <MdPreview
                        class="introduces ba-scroll-style markdown-preview"
                        id="introduces"
                        editorId="introduces"
                        codeTheme="github"
                        :modelValue="kefu.config?.introduces"
                        :show-code-row-number="true"
                    />
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash-es'
import { computed } from 'vue'
import { fullUrl } from '@/utils/common'
import type kefuClass from '@/components/kefu/index'
import { getStatusText } from '@/components/kefu/store'
import Window from '@/components/kefu/components/window.vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css'

const { proxy } = useCurrentInstance()
const kefu = proxy.kefu as kefuClass

// 移动端检测
const isMobile = computed(() => {
    return window.innerWidth <= 768
})

// 获取对话框宽度
const getDialogWidth = () => {
    if (isMobile.value) {
        return '100%'
    }
    return kefu.state.tabMode == 'small' ? '100%' : 900
}

// 获取对话框顶部位置
const getDialogTop = () => {
    if (isMobile.value) {
        return '0'
    }
    return kefu.state.tabMode == 'small' ? '0' : '8vh'
}

// 本地翻译状态文本函数
const translateStatus = (status: string) => {
    const statusKey = getStatusText(status)
    return kefu.t(statusKey)
}

// 对话框打开后创建语言切换器
const onDialogOpened = () => {
    setTimeout(() => {
        kefu.createLanguageSwitcher('language-switcher-container')
    }, 100)
}

// 移动端关闭对话框
const closeDialog = () => {
    kefu.state.sessionDialog.show = false
}
</script>

<style scoped lang="scss">
:deep(.kefu-user-window-modal) {
    .el-overlay-dialog {
        overflow: hidden;
    }
    overflow: hidden;
}

:deep(.kefu-user-window) {
    height: 720px;
    --kefu-body-height: calc(720px - 44px);
    --el-dialog-title-font-size: 16px;
    padding: 0;
    
    .el-dialog__body {
        padding: 0;
    }
    
    .el-dialog__header {
        padding: 10px 54px 10px 10px;
        margin: 0;
        
        .el-dialog__headerbtn {
            top: 0;
            height: 44px;
            width: 44px;
        }
    }
}

:deep(.kefu-user-window-small) {
    margin-bottom: 0;
}

// 移动端样式
:deep(.kefu-user-window-mobile) {
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    
    .el-dialog__header {
        padding: 10px 15px;
        border-bottom: 1px solid #e9ecef;
        
        .el-dialog__headerbtn {
            display: none; // 隐藏默认关闭按钮
        }
    }
    
    .el-dialog__body {
        height: calc(100vh - 60px);
        overflow: hidden;
    }
}

.markdown-preview {
    background: transparent;
    
    :deep(.default-theme p) {
        padding: 0;
        line-height: 1.3;
    }
    
    :deep(.md-editor-preview) {
        font-size: 15px;
    }
    
    :deep(.md-editor-preview-wrapper) {
        padding: 0;
        overflow: hidden;
    }
    
    :deep(.default-theme ul li) {
        margin: 0;
    }
    
    :deep(a) {
        color: var(--el-color-primary);
        text-decoration: none;
        
        &:hover {
            text-decoration: underline;
        }
    }
}

.introduces {
    display: block;
    height: 470px;
    overflow-y: auto;
    overflow-x: hidden;
}

.language-switcher {
    margin-top: 10px;
    text-align: center;
}

#language-switcher-container {
    margin-top: 15px;
    padding-bottom: 15px;
}

.kefu-user-window {
    .kefu-user-window-header {
        display: flex;
        align-items: center;
        position: relative;
        
        .header-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .csr-status {
            padding-left: 4px;
            font-size: 12px;
            white-space: nowrap;
        }
        
        .await-response-loading {
            margin-left: 10px;
        }
        
        .mobile-close-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            background: #f5f5f5;
            transition: all 0.3s ease;
            
            &:hover {
                background: #e0e0e0;
            }
            
            i {
                font-size: 16px;
                color: #666;
            }
        }
    }
    
    .window {
        display: flex;
        box-sizing: border-box;
        height: var(--kefu-body-height);
        
        .left {
            flex: 6;
            height: 100%;
            overflow: hidden;
            
            .notice {
                margin-left: 10px;
                
                .el-alert {
                    display: block;
                    width: 100%;
                    height: 50px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            
            .window-records {
                position: relative;
                height: calc(100% - 50px);
            }
        }
        
        .right {
            flex: 2;
            height: 100%;
            padding: 0 10px;
        }
    }
}

.status-busy {
    color: #a94442;
}

.status-offline {
    color: #777;
}

.status-online {
    color: #3c763d;
}

// 移动端响应式样式
@media (max-width: 768px) {
    :deep(.kefu-user-window-mobile) {
        .kefu-user-window-header {
            padding: 8px 15px;
            
            .header-title {
                font-size: 14px;
                font-weight: 500;
            }
            
            .csr-status {
                font-size: 11px;
                padding-left: 3px;
            }
            
            .await-response-loading {
                margin-left: 8px;
            }
            
            .mobile-close-btn {
                width: 28px;
                height: 28px;
                
                i {
                    font-size: 14px;
                }
            }
        }
        
        .window {
            .left {
                flex: 1;
                
                .window-records {
                    height: 100%; // 移动端占满整个高度
                }
            }
        }
    }
}

// 超小屏幕适配
@media (max-width: 480px) {
    :deep(.kefu-user-window-mobile) {
        .kefu-user-window-header {
            padding: 6px 12px;
            
            .header-title {
                font-size: 13px;
            }
            
            .csr-status {
                font-size: 10px;
                padding-left: 2px;
            }
            
            .mobile-close-btn {
                width: 24px;
                height: 24px;
                
                i {
                    font-size: 12px;
                }
            }
        }
    }
}

// 横屏模式优化
@media (orientation: landscape) and (max-height: 500px) {
    :deep(.kefu-user-window-mobile) {
        height: 100vh !important;
        
        .el-dialog__header {
            padding: 6px 15px;
        }
        
        .el-dialog__body {
            height: calc(100vh - 50px);
        }
        
        .kefu-user-window-header {
            .header-title {
                font-size: 13px;
            }
            
            .csr-status {
                font-size: 10px;
            }
        }
    }
}

// 触摸优化
@media (hover: none) and (pointer: coarse) {
    :deep(.kefu-user-window-mobile) {
        .kefu-user-window-header {
            .mobile-close-btn {
                min-height: 44px;
                min-width: 44px;
                
                &:active {
                    transform: translateY(-50%) scale(0.95);
                }
            }
        }
    }
}

// 防止移动端滚动穿透
@media (max-width: 768px) {
    :deep(.el-overlay) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2000;
    }
    
    :deep(.el-dialog) {
        margin: 0 !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
    }
}
</style>
